<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>figure demo</title>
	<style type="text/css">
		body,figure,figcaption,h2,p,img,div{
			margin: 0;
			padding: 0;
		}
		figure{
			position: relative;
			width: 33.33%;
			height: 350px;
			overflow: hidden;
			float: left;
			
		}
		figure img{
			margin-left:-120px; 
			opacity: 0.8;
			transition: all 0.5s;
		}
		figcaption{
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			color: #FFF;
			font-family: "微软雅黑"；
			
		}
		figure figcaption p,h2,span{
			transition: all 0.5s;
		}
		@media screen and(max-width:600px){
			figure{width: 100%;}
		}
		@media screen and(min-width: 601px) and(max-width:1000px){
			figure{width: 50%;}
		}
		@media screen and(min-width:1001px){
			figure{width: 33.33%;}
		}
		.test3{
			background: white;
		}
		.test3 figcaption{
			top: 30%;
			left: 15%;
		}
		.test3 figcaption h2{
			transform: skew(90deg);
		}
		.test3 figcaption p{
			transform: skew(90deg);
		}
		.test3:hover img{
			opacity: 0.5;
		}
		.test3:hover figcaption h2{
			transform: skew(0deg);
			transition-delay:0.2s; 
		}
		.test3:hover figcaption p{
			transform: skew(0deg);
		}
		</style>
</head>
<body>
	<figure class="test3">
		<img src="./home_1.jpg" alt="谭松韵">
		<figcaption>
			<h2>斜切动画</h2>
			<p>斜切动画图片注解</p>
		</figcaption>
	</figure>
</body>
</html>
